<template>
  <div>
    <div class="tp">
      <img src="../assets/d3b576eb81c58100fae1.jpg" alt="" />
    </div>
    <div class="xq">
      <a
        href=""
        style="
          color: #4b5563;
          padding-left: 50px;
          font-size: 24px;
          display: inline-block;
          position: relative;
          top: 30px;
        "
        >{{ data.data.detail[0].prov }}非遗美食</a
      ><img src="../assets/4.png" alt="" />
      <div
        style="
          width: 250px;
          left: 240px;
          text-align: right;
          display: inline-block;
          position: relative;
          top: -40px;
        "
      >
        <a
          href=""
          style="color: #4b5563; text-decoration: none; font-size: 16px"
        >
          {{ data.data.history[0].D_lovend }}</a
        >
      </div>

      <h1>{{ data.data.detail[0].name }}</h1>
      <div class="xq1">
        {{ data.data.detail[0].detail }}
      </div>
    </div>
    <div>
      <div class="xt"></div>
      <div class="title">
        <h2>[&nbsp;发展历程&nbsp;]</h2>
        <span style="padding: 16px">记录美食背后的故事</span>
        <ol class="relative pt-16">
          <li v-for="x in data.data.process" :key="x.id">
            <div class="flex-1">
              <time>{{ x.T_time }}</time>
              <h3>{{ x.T_detail }}</h3>
            </div>
            <div class="w-8"></div>
          </li>
          <!-- <li></li>
          <li></li> -->
        </ol>
      </div>
    </div>
    <div class="title2">
      <h2>[&nbsp;非遗历史&nbsp;]</h2>
      <br />
      <span style="padding: 16px">用文字展示非遗背后的故事</span>
      <div class="f1">
        <h4>{{ data.data.history[0].D_history }}</h4>
      </div>
      <div class="a1">
        <b>特色标签:</b>
        <a href="" style="color: #4b5563">{{
          data.data.history[0].D_lovend
        }}</a>
        <a href="" style="color: #4b5563">{{ data.data.history[0].D_taste }}</a>
      </div>
    </div>
    <div class="title3">
      <div class="b1">
        <h2>[&nbsp;非遗技艺&nbsp;]</h2>
        <br />
        <span style="padding: 16px">记录非遗经典，传承传统技艺</span>
      </div>
      <!-- <div class="w3">
        <h5 style="color: 9ca3af; text-align: right">{{data.data.S_steps}}</h5>
        <h3 style="text-align: right">第 1 步(step 1)：</h3>
        <p>
          非遗酿造工艺：保宁醋通过42道工序酿制而成，汇集酿造技师之匠心、传统技艺之精要
        </p>
      </div> -->
      <ol class="relative pt-16">
        <li v-for="x in data.data.step" :key="x.id">
          <div class="flex-1">
            <time class="text-gray-400">{{ x.S_steps }}</time>
            <h3>{{ x.S_steps }}</h3>
            <p class="text-gray-500">{{ x.S_method }}</p>
          </div>
          <div class="w-8"></div>
        </li>
      </ol>
      <!-- <div class="t2">
        <img src="../assets/微信图片_20220808191108.jpg" alt="" />
      </div> -->
    </div>
    <!-- <div class="w4">
      <h5 style="color: 9ca3af">第 2 步(step 2)：</h5>
      <h3>第 2 步(step 2)：</h3>
      <p>
        药食同源
        麸醋鼻祖：被醋匠老陈悉心选中的是生长周期长达230天以上的优质原材料，每一粒、每一颗都迸发着蓬勃旺盛的生命力，这些时间的精华，自然需要用最好的技艺保存。
      </p>
    </div>
    <div class="t3">
      <img src="../assets/微信图片_20220808191108.jpg" alt="" />
    </div> -->

    <div class="bg">
      <h2
        style="text-align: center; padding-bottom: 50px; letter-spacing: 0.2rem"
      >
        [&nbsp;基本信息&nbsp;]
      </h2>
      <table
        border="1px "
        width="100%"
        height="90px"
        style="border-collapse: collapse"
      >
        <tr align="center">
          <td>申报者</td>
          <td>传承人</td>
          <td>代表品牌</td>
          <td>非遗级别</td>
          <td>获选批次</td>
          <td>获批时间</td>
          <td>登记地址</td>
        </tr>
        <tr align="center">
          <td>{{ data.data.info[0].I_firm }}</td>
          <td>{{ data.data.info[0].I_Inheritors }}</td>
          <td>{{ data.data.info[0].I_name }}</td>
          <td>{{ data.data.info[0].I_level }}</td>
          <td>{{ data.data.info[0].I_batches }}</td>
          <td>{{ data.data.info[0].I_time }}</td>
          <td>{{ data.data.info[0].I_address }}</td>
        </tr>
      </table>
    </div>
    <div class="title4">
      <div class="c1">
        <h2 style="padding-bottom: 20px">[&nbsp;美食展示&nbsp;]</h2>
        <span>用美妙的图片展示美食的鲜香</span>
      </div>
    </div>
    <template>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="x in data.data.img"
          ><img :src="`https://ichf.cn${x.image}`" alt=""
        /></swiper-slide>
        <!-- <swiper-slide><img src="../assets/sc-blc2.jpg" alt="" /></swiper-slide>
        <swiper-slide
          ><img src="../assets/scnc-pnc3.jpg" alt=""
        /></swiper-slide> -->
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
    </template>
    <p
      style="
        text-align: center;
        margin-top: 25px;
        margin-bottom: 250px;
        color: #9ca3af;
      "
    >
      * 所有产品请以实物为准，图片仅供参考。
    </p>
    <el-row :gutter="32" class="bot-row2">
      <el-col :span="6"
        ><div class="adv">
          <img src="../../public/bf6f91c38757d1ef2a25.jpeg" alt="" />
          <p>广告位1</p>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="adv">
          <img src="../../public/bf6f91c38757d1ef2a25.jpeg" alt="" />
          <p>广告位1</p>
        </div></el-col
      ><el-col :span="6"
        ><div class="adv">
          <img src="../../public/bf6f91c38757d1ef2a25.jpeg" alt="" />
          <p>广告位1</p>
        </div></el-col
      ><el-col :span="6"
        ><div class="adv">
          <img src="../../public/bf6f91c38757d1ef2a25.jpeg" alt="" />
          <p>广告位1</p>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      data: [],
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        loop: true,
        autoplay: {
          delay: 2000,
        },
        loopFillGroupWithBlank: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
  mounted() {
    let name = this.$route.query.name;
    if (!name) name = "四川保宁醋";
    let url = "index/food_detail/" + name;
    this.axios(url).then((res) => {
      console.log(res);
      this.data = res.data;
    });
  },
};
</script>

<style lang="scss">
.title {
  color: #111827;
  text-align: center;
  padding: 70px 0;
  letter-spacing: 0.2rem;
  position: relative;
  background-color: white;

  /* border-right: 1px solid red; */
  > img {
    position: absolute;
    top: 21%;
    transform: translate(-25%, 0);
    // z-index: -100;
  }

  > h2 {
    font-weight: 400;
    font-size: 30px;
    padding: 10px 0;
  }
}

.tp {
  height: 140vh;

  img {
    width: 100%;
  }
}

.zzzz {
  height: 8vh;
}

.relative {
  position: relative;
}

.pt-16 {
  padding-top: 4rem;
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  flex-direction: row;
}

.flex-1 {
  // box-sizing: border-box;
  border-right: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  width: 607px;
  // height: 52px;
  padding: 32px 32px 32px 34px;
}

ol > li:nth-child(even) {
  text-align: right;

  &::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e5e7eb;
    transform: translate(-54%, -50%);
  }
}

ol > li:nth-child(odd) {
  text-align: left;
  flex-direction: row-reverse;
  border-left: 1px solid #e5e7eb;

  // padding: 32px 0 32px 32px;
  // transform: translate(0, -50%);
  &::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #e5e7eb;
    transform: translate(54%, 50%);
  }
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgba(156, 163, 175, var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1rem;
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
  font-size: 1rem;
  line-height: 1.25rem;
}

.t2 {
  margin-top: 50px;
}

.xq {
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  top: 0;
  margin-left: 100px;
  margin-top: 230px;
  width: 552px;
  height: 437px;
  position: absolute;
}

.xq > h1 {
  // font-family: "Mengshen HanSerif", serif;
  margin-top: 5px;
  margin-left: 43px;
  font-size: 48px;
  margin-bottom: 10px;
  color: #1f2937;
  font-family: "奶酪拼音体";
}

.xq img {
  width: 48px;
  height: 48px;
  margin-left: 495px;
  margin-top: -15px;
}

.xq1 {
  width: 456px;
  height: 200px;
  background-color: white;
  margin: 0 auto;
  color: #111827;
  font-size: 17px;
  padding: 10px 10px 10px 10px;
  font-family: "汉仪天马行楷";
  font-weight: 700;
}

.title2 {
  color: #111827;
  text-align: center;
  letter-spacing: 0.2rem;
  height: 600px;
  background-color: #e5e7eb;
  padding-top: 100px;

  > h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: inherit;
  }
}

.title2 .f1 {
  margin-left: 150px;
  width: 1024px;
  height: 335px;
  margin-top: 50px;
  margin-bottom: 50px;
  font-size: 18px;
  color: #1f2937;
  background-color: white;
  padding: 20px 15px 20px 15px;
  font-family: "汉仪天马行楷";
  line-height: 24px;
}

.title3 {
  color: #111827;
  margin-top: 50px;
  letter-spacing: 0.2rem;
}

.b1 {
  text-align: center;

  > h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: inherit;
  }
}

.w3 {
  width: 500px;
  margin-top: 160px;
  margin-left: 150px;
  /* text-align: right; */
}

.t2 {
  margin-top: -110px;
  text-align: center;
}

.w4 {
  color: #111827;
  margin-top: 50px;
  letter-spacing: 0.2rem;
  width: 520px;
  margin-left: 700px;
  margin-top: -465px;
}

.t3 {
  margin-top: 330px;
  text-align: center;
}

.bg {
  width: 100%;
  height: 250px;
  background-color: #e5e7eb;
  margin-top: 50px;
  padding-top: 50px;

  > h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: inherit;
  }
}

.title4 .c1 {
  color: #111827;
  text-align: center;
  margin-top: 50px;
  letter-spacing: 0.2rem;

  > h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: inherit;
  }
}
</style>
<style lang="scss">
.swiper {
  .swiper-slide {
    overflow: hidden;
    width: 426px;
    height: 328px;

    img {
      width: 420px;
      height: 320px;
      padding: 15px 5px;
    }
  }
}
.bot-row2 {
  .adv {
    position: relative;
    > img {
      width: 100%;
    }
    p {
      backdrop-filter: blur(5px);
      background-color: rgba(255, 255, 255, 0.7);
      padding: 12px 0;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
